<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://y0.ifengimg.com/base/jQuery/jquery-1.8.3.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/asset/map/js/china.js"></script>
</head>
<body>
<div ><div id="main" style="height:300px; " ></div></div>

<div ><div id="main2" style="height:300px;"></div></div>
<script type="text/javascript">
    var data=[128,64,32,16,8]
    option1 = {
        tooltip : {

        },
        legend: {
            orient : 'horizontal',
            x : 'center',
            width:'80%',
            icon:'circle',
            data:['正面','中性','负面',],
        },
        calculable : true,
        series : (function (){
            var series = [];
            for (var i = 0; i < 20; i++) {
                series.push({
                    name: '情感分析',
                    type:'pie',
                    hoverAnimation:false,
                    startAngle:90+i*20,
                    itemStyle : {normal : {
                        label : {show : i > 28,formatter:'{d}%',},
                        labelLine : {show : i > 28, length:35}
                    }},
                    radius : [i * 6 + 60, i * 6 + 68],
                    data:[
                        {value: data[0], name:'正面'},
                        {value: data[1], name:'中性'},
                        {value: data[2], name:'负面'},

                    ]
                })
            }
            return series;
        })()
    };
 var option2 = {
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              x : 'center',
              y : 'bottom',
              data:['正面','中性','负面']
            },
            calculable : true,
     series : (function (){
         var series = [];
         for (var i = 0; i < 20; i++) {
             series.push({
                 name: '情感分析',
                 type:'pie',
//                 radius : [30, 110],
            roseType : 'area',
                 startAngle:90+i*20,
                 itemStyle : {normal : {
                     label : {show : i > 28,formatter:'{d}%',},
                     labelLine : {show : i > 28, length:35}
                 }},
                 radius : [i * 6 + 60, i * 6 + 80],
                 data:[
                     {value: 20, name:'正面'},
                     {value: 30, name:'中性'},
                     {value:50, name:'负面'},

                 ]
             })
         }
         return series;
     })()
          };
    getchart('main',option1)
    getchart('main2',option2)
    function getchart(id,option){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));

//        var option = {
//        tooltip : {
//          trigger: 'item',
//          formatter: "{a} <br/>{b} : {c} ({d}%)"
//        },
//        legend: {
//          x : 'center',
//          y : 'bottom',
//          data:['正面','中性','负面']
//        },
////        toolbox: {
////          show : true,
////          feature : {
////            mark : {show: true},
////            dataView : {show: true, readOnly: false},
////            magicType : {
////              show: true,
////              type: ['pie', 'funnel']
////            },
////            restore : {show: true},
////            saveAsImage : {show: true}
////          }
////        },
//        calculable : true,
//        series : [{
//            name:'情感属性',
//            type:'pie',
//            radius : [30, 110],
//            roseType : 'area',
//            data:[
//              {value:20, name:'正面'},
//              {value:30, name:'中性'},
//              {value:50, name:'负面'},
//            ]
//          }
//        ]
//      };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>
</body>
</html>